<style rel="stylesheet/scss" lang="scss" scoped>
</style>
<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div class="el-page-header">
                    <div class="el-page-header__left" @click="crud.goBack()">
                        <i class="el-icon-back"></i>
                        <div class="el-page-header__title">返回</div>
                    </div>
                    <div class="el-page-header__content">修改调度服务</div>
                </div>
            </div>
            <div class="dataFrom">
                <el-form ref="form" :rules="rules" label-position="left" label-width="240px" :model="form"  >
                    <div>
                        <el-row >
                            <el-col  :xs="12" :sm="12" :md="12" :lg="12" :xl="12" >
                                <el-form-item label="服务编码"  prop="agentCode"  >
                                    <el-input v-model="form.agentCode" :disabled="true" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="9" class="data_from_el-col" >
                                <div class="hex-form-inf">
                                    <div class="hex-form-inf-content">
                                        唯一主键且不可重复
                                    </div>
                                    <i
                                            class="el-icon-info hex-form-inf-icon"
                                            @click="onOperInf($event)"
                                            data-status="off"
                                    ></i>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row >
                            <el-col  :xs="12" :sm="12" :md="12" :lg="12" :xl="12" >
                                <el-form-item label="服务名称"  prop="agentName"  >
                                    <el-input v-model="form.agentName" :disabled="true" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="9" class="data_from_el-col" >
                                <div class="hex-form-inf">
                                    <div class="hex-form-inf-content">
                                        节点名称不多于12位，且不可重复
                                    </div>
                                    <i
                                            class="el-icon-info hex-form-inf-icon"
                                            @click="onOperInf($event)"
                                            data-status="off"
                                    ></i>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                                <el-form-item label="服务主机" prop="agentIp"  >
                                    <el-input v-model="form.agentIp" :disabled="true"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9" class="data_from_el-col">
                                <div class="hex-form-inf">
                                    <div class="hex-form-inf-content">
                                        节点的IP地址(格式 xx.xx.xx.xx,例如:192.168.1.1)
                                    </div>
                                    <i
                                            class="el-icon-info hex-form-inf-icon"
                                            @click="onOperInf($event)"
                                            data-status="off"
                                    ></i>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" >
                                <el-form-item label="服务端口" prop="agentPort"  >
                                    <el-input v-model="form.agentPort"   />
                                </el-form-item>
                            </el-col>
                            <el-col :span="9" class="data_from_el-col">
                                <div class="hex-form-inf">
                                    <div class="hex-form-inf-content">
                                        不能多于5个字符
                                    </div>
                                    <i
                                            class="el-icon-info hex-form-inf-icon"
                                            @click="onOperInf($event)"
                                            data-status="off"
                                    ></i>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                                <el-form-item label="版本号" prop="serverVer">
                                    <el-select v-model="form.serverVer" filterable placeholder="请选择" >
                                        <el-option v-for="item in this.dict.server_version" :key="item.value" :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9" class="data_from_el-col">
                                <div class="hex-form-inf">
                                    <div class="hex-form-inf-content">
                                        调度服务发布版本
                                    </div>
                                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" >
                                <el-form-item label="并发数" prop="concurrentNum" >
                                  <el-input-number v-model="form.concurrentNum" :step="1" step-strictly :min="1" style="width: 100%;" max="100000"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9" class="data_from_el-col">
                                <div class="hex-form-inf">
                                    <div class="hex-form-inf-content">
                                        服务上同时执行任务数阈值
                                    </div>
                                    <i
                                            class="el-icon-info hex-form-inf-icon"
                                            @click="onOperInf($event)"
                                            data-status="off"
                                    ></i>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" >
                                <el-form-item label="资源数" prop="resNum" >
                                  <el-input-number v-model="form.resNum" :step="1" step-strictly :min="1" style="width: 100%;" max="100000"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9" class="data_from_el-col">
                                <div class="hex-form-inf">
                                    <div class="hex-form-inf-content">
                                        服务上同时执行任务的资源数总和阈值
                                    </div>
                                    <i
                                            class="el-icon-info hex-form-inf-icon"
                                            @click="onOperInf($event)"
                                            data-status="off"
                                    ></i>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" >
                                <el-form-item label="服务描述" prop="agentDesc" >
                                    <el-input type="textarea" :rows="2"
                                              placeholder="请输入内容"
                                              v-model="form.agentDesc" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9" class="data_from_el-col">
                                <div class="hex-form-inf">
                                    <div class="hex-form-inf-content">
                                        服务的特殊信息描述备注
                                    </div>
                                    <i
                                            class="el-icon-info hex-form-inf-icon"
                                            @click="onOperInf($event)"
                                            data-status="off"
                                    ></i>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <div  class="form-operator-button" >
                                <el-button type="primary"  @click="crud.goBack()">取消</el-button>
                                <el-button @click="submitForm()" :loading="crud.status.cu === 2" type="primary" >保存</el-button>
                            </div>
                        </el-row>
                    </div>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
    import CRUD, { form,  crud} from '@crud/crud'
    import { isInteger } from '@/utils/validate'
    import {validatePort} from "../../../../utils/validate";

    const defaultForm = {}
    export default {
        name: 'dispatchEdit',
        components: {},
        mixins: [form(defaultForm), crud()],
        dicts: ['server_version'],
        data() {

            return {
                rules: {
                    agentPort: [
                        {required: true, message: '请输入服务端口', trigger: 'blur'},
                        { validator: validatePort, trigger: 'blur' },
                        // { validator: validateServerPort, trigger: 'blur' }
                    ],
                    concurrentNum: [
                        {required: true, message: '请输入服务并发数', trigger: 'blur'},
                    ],
                    resNum: [
                        {required: true, message: '请输入服务资源数', trigger: 'blur'},
                    ],
                      serverVer: [
                    {required: true, message: '请选择版本号', trigger: 'blur'},
                    ],
                },
            }
        },
        created() {

        },
        methods: {
            onOperInf: function (e) {
                let status = e.target.getAttribute('data-status');
                let previousNode = e.target.previousElementSibling;
                if("off" == status){
                    previousNode.setAttribute('class','hex-form-inf-content-show');
                    e.target.setAttribute('data-status','on');
                }else {
                    previousNode.setAttribute('class','hex-form-inf-content');
                    e.target.setAttribute('data-status','off');
                }
            },
            submitForm(){
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.crud.doEdit();
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>
<style scoped>
    .form-operator-button {
        padding: 10px;
        background-color: #fff;
        position: fixed;
        width: 100%;
        left: 0px;
        right: 0;
        bottom: 30px;
        height: 55px;
        text-align: center;
        -webkit-box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
        box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
    }

    .hex-form-inf {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        cursor: pointer;
        margin-right: 40px;
        position: relative;
        min-height: 33px;
        margin-left: 60px;
        line-height: 33px;
    }

    .hex-form-inf-content {
        font-size: 14px;
        font-weight: 500;
        display: none;
    }

    .hex-form-inf .hex-form-inf-content-show {
        padding: 0 4%;
        background-color: gainsboro;
        border-radius: 8px;
    }

    .hex-form-inf-icon {
        font-size: 20px;
        margin-top: 5px;
        position: absolute;
        right: 0px;
    }
</style>
